<template>
  <div class="order-card">
    <h3>{{ title }}</h3>
    <!-- card body -->
    <el-form
      size="mini"
      label-position="right"
      label-width="100px"
    >
      <el-form-item label="订单ID:">
        <span> {{ model.id }}</span>
      </el-form-item>

      <el-form-item label="订单号:">
        <span> {{ model.orderNo }}</span>
      </el-form-item>

      <el-form-item label="下单时间:">
        <span> {{ model.orderTime | dateFmt }}</span>
      </el-form-item>
      <el-form-item label="联系电话">
        <span v-if="isShow"> {{ model.phone }}</span>
        <el-input
          v-else
          v-model="model.phone"
        ></el-input>
      </el-form-item>

      <el-form-item label=" 收货人:">
        <span v-if="isShow">{{ model.consignee }}</span>
        <el-input
          v-else
          v-model="model.consignee"
        ></el-input>
      </el-form-item>

      <el-form-item label="送货地址:">
        <span v-if="isShow"> {{ model.deliverAddress | dateFmt }}</span>
        <el-input
          v-else
          v-model="model.deliverAddress"
        ></el-input>
      </el-form-item>

      <el-form-item label=" 送达时间:">
        <span v-if="isShow">{{ model.deliveryTime | dateFmt }}</span>
        <el-date-picker
          v-else
          v-model="model.deliveryTime"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="备注:">
        <span v-if="isShow"> {{ model.remarks }}</span>
        <el-input
          v-else
          v-model="model.remarks"
        ></el-input>
      </el-form-item>

      <el-form-item label="订单金额:">
        <span v-if="isShow">{{ model.orderAmount }}</span>
        <el-input-number
          v-else
          v-model="model.orderAmount"
          :min="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="订单状态:">
        <span v-if="isShow">{{ model.orderState }}</span>
        <el-select
          v-else
          v-model="model.orderState"
        >
          <el-option
            label="待处理"
            value="待处理"
            >待处理</el-option
          >
          <el-option
            label="已受理"
            value="已受理"
            >已受理</el-option
          >
          <el-option
            label="派送中"
            value="派送中"
            >派送中</el-option
          >
          <el-option
            label="已完成"
            value="已完成"
            >已完成</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="handleEditOrder"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    isShow: {
      type: Boolean,
      required: true
    },
    model: {
      type: Object,
      default: () => {},
      required: true
    }
  },
  data() {
    return {}
  },
  methods: {
    handleEditOrder() {
      this.$emit('click', this.model)
    }
  }
}
</script>
<style lang="scss" scoped>
h3 {
  margin-bottom: 10px;
}
::v-deep .el-form {
  width: 300px;
  .el-form-item__content {
    display: flex;
  }
}
</style>
